<template>
  <div class="graphitizing">
    <!-- 表格 -->
    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in tableList"
          :key="item.id"
          :label="item.name"
          :prop="item.prop"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
        />
        <el-table-column label="低谷(占比)" align="center" width="100">
          <template slot-scope="{ row }">
            <span>{{
              ((row.electricity1 / row.electricAmount) * 100).toFixed(2) + "%"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="平段(占比)" align="center" width="100">
          <template slot-scope="{ row }">
            <span>{{
              ((row.electricity2 / row.electricAmount) * 100).toFixed(2) + "%"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="高峰(占比)" align="center" width="100">
          <template slot-scope="{ row }">
            <span>{{
              ((row.electricity3 / row.electricAmount) * 100).toFixed(2) + "%"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="尖峰(占比)" align="center" width="100">
          <template slot-scope="{ row }">
            <span>{{
              ((row.electricity4 / row.electricAmount) * 100).toFixed(2) + "%"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="280" fixed="right">
          <template slot-scope="{ row }">
            <div class="tablebBtn">
              <el-button
                type="text"
                class="btnText"
                size="small"
                @click="goReportDetail(row)"
              >
                <el-link
                  style="color: #409eff; font-size: 12px !important"
                  :underline="false"
                  >导出报表</el-link
                ></el-button
              >
              <el-button type="text" class="btnText" size="small">
                <el-link
                  :disabled="row.excelUrl === '' ? true : false"
                  :underline="false"
                  :href="row.excelUrl"
                  >装炉报告</el-link
                ></el-button
              >

              <el-button
                @click="goOriginalData(row)"
                type="text"
                class="btnText"
                size="small"
              >
                <el-link :underline="false">原始记录</el-link></el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-if="tableData.length !== 0"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalCount"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-drawer
      :with-header="false"
      direction="rtl"
      :visible.sync="drawer"
      :before-close="handleClose"
      destroyOnClose
      append-to-body
      size="980px"
    >
      <!-- 这是通过props -->
      <!-- <ReportDetail @sonclose="handleEvents" :reportItem="reportItem" /> -->
      <!-- 跳转新页面-->
      <ReportDetail />
    </el-drawer>
  </div>
</template>

<script>
import ReportDetail from './reportDetail.vue'
import { getHisReport, getOriginalData } from '@/api/process'
export default {
  name: 'hisReport',
  components: { ReportDetail },
  data () {
    return {
      drawer: false,
      pageSize: 10, // 分页的页面大小
      totalCount: 0, // 分页的数据总数
      currentPage: 1, // 分页的当前页
      tableData: [],
      tableList: [
        {
          id: 1,
          name: '编号',
          prop: 'code',
          fixed: 'left',
          width: 150
        },
        {
          id: 5,
          name: '炉号',
          prop: 'stoveNumber'
        },
        {
          id: 10,
          name: '送电时间',
          prop: 'startTime',
          width: 150
        },
        {
          id: 15,
          name: '停电时间',
          prop: 'endTime',
          width: 150
        },
        {
          id: 16,
          name: '时长',
          prop: 'runTime',
          width: 100
        },
        {
          id: 19,
          name: '总炉数',
          prop: 'totalStoveNum',
          width: 70
        },
        {
          id: 21,
          name: '总重',
          prop: 'totalWeight'
        },
        {
          id: 22,
          name: '总支数',
          prop: 'totalNumber'
        },
        {
          id: 23,
          name: '总价',
          prop: 'totalPrice',
          width: 100
        },
        {
          id: 25,
          name: '电量合计',
          prop: 'electricAmount',
          width: 150
        },
        {
          id: 30,
          name: '有功电量',
          prop: 'activeElectricity'
        },
        {
          id: 32,
          name: '单价',
          prop: 'price'
        }
      ],
      reportItem: {}
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    handleEvents () {
      this.drawer = false
    },
    goOriginalData (row) {
      const payload = {
        code: row.code
      }
      getOriginalData(payload).then(res => {
        if (res.data.code === 200) {
          window.location.href = 'http://' + res.data.data
        }
      })
    },
    goReportDetail (row) {
      const routeUrl = this.$router.resolve({
        path: '/reportDetail',
        query: row
      })
      window.open(routeUrl.href, '_blank')
    },
    handleClose () {
      this.drawer = false
    },
   
    async getTableData () {
      const paylaod = {
        currPage: this.currentPage,
        pageSize: this.pageSize
      }
      const res = await getHisReport(paylaod)
      if (res.data.code === 200) {
        this.tableData = res.data.data.data
        this.totalCount = res.data.data.totalCount
      }


      
    },
    
    handleSizeChange (value) {
      this.pageSize = value
      this.getTableData()
    },
    handleCurrentChange (value) {
      this.currentPage = value
      this.getTableData()
    }
  }
}
</script>

<style  scoped>
.card-search {
  padding-bottom: 10px;
}
.tablebBtn .el-button {
  padding: 8px 14px;
}
.el-divider {
  margin: 30px 0;
}
.el-link {
  line-height: 1;
  padding-bottom: 12px;
}
.dialogTitle {
  padding: 18px;
  font-size: 18px;
}
.isTow {
   .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 2px 0 0 2px;
  }
   .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 2px 2px 0;
  }
   .is-active .el-radio-button__inner {
    background-color: $primary;
    border-color: $primary;
  }
}
.el-link {
  color: #409eff;
  font-size: 12px !important;
  padding-bottom: 0;
}
</style>
